<template>
	<view class="loginContainer">
		<!-- 提示登录的图标 -->
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
		<!-- 登录按钮 -->
		<button type="primary" class="loginBtn" @click="getLogin">一键登录</button>
		<!-- 登录提示 -->
		<view class="loginTips">将默认使用微信账号进行登录</view>

		<!-- 设置头像与昵称弹出层 -->
		<uni-popup ref="popup" backgroundColor="#f5f5f5" :mask-click="false" @maskClick="popupMaskClick">
			<view class="userInfo" :style="{ height: popupHeight + 'px' }">
				<!-- 头像 -->
				<view class="avatar">
					<button open-type="chooseAvatar" @chooseavatar="chooseAvatar"><image :src="avatarUrl"></image></button>
				</view>
				<!-- 昵称 -->
				<view class="nickname">
					<text>昵称</text> <input type="nickname" placeholder="请输入昵称" @change="getNickname" v-model="nickname" />
				</view>
				<!-- 保存按钮 -->
				<button type="primary" class="save" @click="saveUserInfo">保存</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'my-login',
	data() {
		return {
			popupHeight: 0,
			avatarUrl: '/static/tab_icons/my.png',
			nickname: ''
		}
	},
	computed: {
		...mapState('m_user', ['redirectInfo'])
	},
	created() {
		// 获取设备屏幕可用高度80%，用于弹出层高度
		const { windowHeight: res } = uni.getSystemInfoSync()
		this.popupHeight = res * 0.8
	},
	methods: {
		...mapMutations('m_user', ['updateToken', 'updateUserInfo', 'updateRedirectInfo']),

		// 登录功能
		async getLogin() {
			// 由于教程服务器的登录凭证(code)校验逻辑未按最新小程序关于获取用户基本信息的调整，因此使用固定的token模拟登录成功，此处省略获取token代码

			// 更新token至Vuex，使用固定token折中
			this.updateToken({
				token:
					'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo'
			})

			// 提示用户是否设置头像与昵称
			const [err, res] = await uni.showModal({
				content: '登录成功！是否设置头像与昵称？'
			})
			// 提示窗异常，直接退出函数
			if (err) {
				console.log(err)
			}
			// 用户点击取消，使用默认头像与昵称
			if (res.cancel) {
				// 提交mutation将默认头像与昵称保存到userInfo对象
				this.updateUserInfo({
					avatarUrl: this.avatarUrl,
					nickname: '天选打工人'
				})
				// 调用登录成功返回跳转前页面函数
				this.navigateBack()
			}
			// 用户点击确定，从底部弹出设置层
			if (res.confirm) {
				this.$refs.popup.open('bottom')
			}
		},

		// 定义登录成功返回跳转前页面函数
		navigateBack() {
			// 判断若存在redirectInfo则进行跳转
			if (JSON.stringify(this.redirectInfo) !== '{}') {
				// 若跳转前页面为tab页
				if (this.redirectInfo.openType === 'switchTab') {
					uni.switchTab({
						url: this.redirectInfo.fromUrl,
						// 跳转成功则清空对象
						complete: () => {
							this.updateRedirectInfo({})
						}
					})
				}
			}
		},

		// 监听弹出层显示时点击遮罩层事件
		async popupMaskClick() {
			const [err, res] = await uni.showModal({
				content: '当前尚未完成设置，离开将应用默认设置，是否确认离开？'
			})
			// 提示窗异常或用户点击取消，退出函数，停留在弹出层
			if (err || res.cancel) return
			// 用户确认离开，手动关闭弹出层，并应用默认用户信息
			if (res.confirm) {
				// 提交mutation将默认头像与昵称保存到userInfo对象
				this.updateUserInfo({
					avatarUrl: this.avatarUrl,
					nickname: '天选打工人'
				})
				// 关闭弹出层
				this.$refs.popup.close()
				// 调用登录成功返回跳转前页面函数
				this.navigateBack()
			}
		},

		// 监听选择头像的button的chooseavatar事件
		chooseAvatar(e) {
			// 获取用户选择的头像的临时url
			const { avatarUrl } = e.detail
			// 赋值给页面头像图片url动态绑定的变量
			this.avatarUrl = avatarUrl
		},

		// 监听选择昵称的input的change事件
		getNickname(e) {
			// 由于选择使用微信昵称时会莫名触发两次事件，第一次触发返回空字符串，因此有如下判断
			if (e.detail.value !== '') {
				this.nickname = e.detail.value
			}
		},

		// 监听保存按钮的点击事件
		saveUserInfo() {
			if (this.avatarUrl === '/static/tab_icons/my.png') return uni.$showMsg('请选择头像')
			if (this.nickname === '') return uni.$showMsg('请输入昵称')
			// 提交mutation将当前用户的头像与昵称保存到userInfo对象
			this.updateUserInfo({
				avatarUrl: this.avatarUrl,
				nickname: this.nickname
			})
			// 提示用户保存成功并关闭弹出层
			uni.$showMsg('保存成功!')
			this.$refs.popup.close()
			// 期望提示保存成功后，才调用登录成功返回跳转前页面函数
			setTimeout(() => {
				this.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style lang="scss">
// 登录页面
.loginContainer {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;

	// 登录按钮
	.loginBtn {
		margin: 15px 0;
		width: 90%;
		border-radius: 100px;
		background-color: #c00000;
	}

	// 登录提示
	.loginTips {
		font-size: 14px;
		color: gray;
	}

	// 弹出层
	.userInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		// 头像
		.avatar {
			margin: 20px 0;
			button {
				padding: 0;
				width: 100px;
				height: 100px;
			}
			image {
				width: 100%;
				height: 100%;
			}
		}
		// 昵称
		.nickname {
			width: 80%;
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 16px;
			border-top: 1px solid #d6d6d6;
			border-bottom: 1px solid #d6d6d6;
		}
		// 保存按钮
		.save {
			margin-top: 20px;
			width: 60%;
			border-radius: 100px;
			background-color: #c00000;
		}
	}
}
</style>
